<template>
  <div class="load">
    <div class="top">
      <div class="left">
        <div class="item">
          <div class="label">
            <span></span>
            <span>码头代码</span>
          </div>
          <el-input
            v-model="form.termCode"
            placeholder="请输入"
            size="small"
            style="width: 120px"
            clearable
          >
          </el-input>
        </div>

        <div class="item">
          <div class="label">
            <span></span>
            <span>提单号</span>
          </div>
          <el-input
            v-model="form.billNo"
            placeholder="请输入"
            size="small"
            style="width: 120px"
            clearable
          >
          </el-input>
        </div>

        <div class="item">
          <div class="label">
            <span></span>
            <span>车牌</span>
          </div>
          <el-input
            v-model="form.deviceToolNo"
            placeholder="请输入"
            size="small"
            style="width: 120px"
            clearable
          >
          </el-input>
        </div>

        <div class="item">
          <div class="label">
            <span></span>
            <span>尺寸型号</span>
          </div>
          <el-input
            v-model="form.sizeType"
            placeholder="请输入"
            size="small"
            style="width: 120px"
            clearable
          >
          </el-input>
        </div>

        <div class="item">
          <div class="label">
            <span></span>
            <span>箱公司</span>
          </div>
          <el-input
            v-model="form.containerBelongCode"
            placeholder="请输入"
            size="small"
            style="width: 120px"
            clearable
          >
          </el-input>
        </div>

        <div class="item">
          <div class="label">
            <span></span>
            <span>进港时间</span>
          </div>
          <el-date-picker
            v-model="form.inTimeRange"
            type="datetimerange"
            size="mini"
            style="width: 320px"
            value-format="yyyy-MM-dd HH:mm:ss"
            :picker-options="pickerOptions"
            range-separator="至"
            start-placeholder="进港开始时间"
            end-placeholder="进港结束时间"
            align="right"
          >
          </el-date-picker>
        </div>
        <div class="item">
          <div class="label">
            <span></span>
            <span>离港时间</span>
          </div>
          <el-date-picker
            v-model="form.outTimeRange"
            type="datetimerange"
            size="mini"
            value-format="yyyy-MM-dd HH:mm:ss"
            style="width: 320px"
            :picker-options="pickerOptions"
            range-separator="至"
            start-placeholder="离港开始时间"
            end-placeholder="离港结束时间"
            align="right"
          >
          </el-date-picker>
        </div>
        <div class="item">
          <el-button
            type="primary"
            class="search"
            @click="getFleetList"
            icon="el-icon-search"
            >查询</el-button
          >
        </div>
      </div>
    </div>
    <div class="table">
      <el-table
        :data="tableData"
        :header-cell-style="{ background: '#EEF1F5' }"
        style="width: 100%"
        @row-click="rowClick"
      >
        <el-table-column prop="termCode" label="码头代码" width="180">
        </el-table-column>
        <el-table-column prop="billNo" label="提单号" width="180">
        </el-table-column>
        <el-table-column prop="deviceToolNo" label="车牌" width="80">
        </el-table-column>
        <el-table-column prop="sizeType" label="尺寸型号" width="180">
        </el-table-column>
        <el-table-column
          prop="containerBelongCode"
          label="箱公司代码"
          width="180"
        >
        </el-table-column>
        <el-table-column
          prop="containerBelongName"
          label="箱公司名称"
          width="180"
        >
        </el-table-column>
        <el-table-column prop="arrivePortDate" label="进港时间" width="180">
        </el-table-column>
        <el-table-column prop="departPortDate" label="出港时间" width="180">
        </el-table-column>
        <el-table-column prop="loadDate" label="工厂装货时间" width="180">
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="queryAll.startpage"
          :page-sizes="[10, 15, 30, 50]"
          :page-size="queryAll.pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="queryAll.totalNum"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'loadList',
  data() {
    return {
      tableData: [],
      termList: [],
      condition: {
        scdId: '',
        voyType: '',
        billno: '',
        cntrno: '',
      },
      dialogVisible: false,
      visible: 'box',
      btnLoading: false,
      btnLoading2: false,
      boxInfo: {},
      isChecked: false,
      currentIndex: -1,
      multipleSelection: {},
      queryAll: {
        startpage: 1,
        pagesize: 10,
        totalNum: 0,
      },
      form: {
        orgCode: '', // 委托单位机构代码
        termCode: '', // 码头代码
        billNo: '', // 提单号
        deviceToolNo: '', // 车牌
        // "sealNo": "356?7", // 铅封号
        sizeType: '', //  尺寸型号
        containerBelongCode: '', // 箱属代码/箱公司或船公司
        // orgCode: '91340100MA2U1YDUZC', // 委托单位机构代码
        // termCode: 'ZSHX', // 码头代码
        // billNo: 'tdh0001', // 提单号
        // deviceToolNo: '赣C0062D', // 车牌
        // // "sealNo": "356?7", // 铅封号
        // sizeType: '20', //  尺寸型号
        // containerBelongCode: 'TCS105234C', // 箱属代码/箱公司或船公司
        // arrivePortDateStart: '2023-12-28 00:00:00', // 进港时间开始
        // arrivePortDateEnd: '2024-03-28 23:59:59', // 进港时间结束
        // departPortDateStart: '2016-12-07 04:55:08', // 离港开始
        // departPortDateEnd: '2024-04-29 04:34:57', // 离港结束
        // loadDateStart: '2014-10-24 19:24:08', // 工厂装货开始时间
        // loadDateEnd: '2027-12-23 13:14:23', // 工厂装货结束时间
        inTimeRange: [],
        outTimeRange: [], 
      },
      title: '',
      driverFlag: '',
      pickerOptions: {
        shortcuts: [
          {
            text: '最近一周',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            },
          },
          {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            },
          },
          {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            },
          },
        ],
      },
    }
  },

  methods: {
    getFleetList(flag) {
      let params = {
        current: this.queryAll.startpage,
        size: this.queryAll.pagesize,
        termCode: this.form.termCode,
        delegateNo: this.form.delegateNo,
        billNo: this.form.billNo,
        deviceToolNo: this.form.deviceToolNo,
        containerBelongCode: this.form.containerBelongCode,
        arrivePortDateStart:
          this.form.inTimeRange && this.form.inTimeRange.length
            ? this.form.inTimeRange[0]
            : '',
        arrivePortDateEnd:
          this.form.inTimeRange && this.form.inTimeRange.length
            ? this.form.inTimeRange[1]
            : '',
        departPortDateStart:
          this.form.outTimeRange && this.form.outTimeRange.length
            ? this.form.outTimeRange[0]
            : '',
        departPortDateEnd:
          this.form.outTimeRange && this.form.outTimeRange.length
            ? this.form.outTimeRange[1]
            : '',
      }
      this.$api.containerVehiclePage(params).then((res) => {
        this.tableData = res.data.pages
        this.queryAll.totalNum = res.data.totalNum
        if (flag) {
          this.tableData.map((item) => {
            if (item.id == this.multipleSelection.id) {
              this.$set(this, 'multipleSelection', item)
              console.log(this.multipleSelection)
            }
          })
        }
      })
    },
    rowClick(v) {
      this.multipleSelection = v
    },
    handleSizeChange(val) {
      this.queryAll.startpage = 1
      this.queryAll.pagesize = val
      this.getFleetList()
    },
    handleCurrentChange(val) {
      this.queryAll.startpage = val
      this.getFleetList()
    },
  },

  computed: {},

  mounted() {
    this.condition.voyType = this.$route.name == 'unloadList' ? 'I' : 'E'
    this.condition.scdId = this.$route.query.id
    this.getFleetList()
  },
}
</script>
<style lang="less" scoped>
.load {
  background: #fff;
  padding: 20px;
}
.top {
  display: flex;
  align-items: flex-start;

  border-bottom: 1px solid #d7d7d7;
  box-sizing: border-box;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #000000;
  line-height: 16px;
  display: flex;
  .item {
    display: flex;
    align-items: center;
    margin-right: 20px;
    margin-bottom: 17px;
    .label {
      margin-right: 5px;
      width: 60px;
      span:first-child {
        color: #ff3838;
      }
    }
  }
  .search {
    background: #0f47b8;
    height: 30px;
    padding: 5px 10px;
  }
  .del {
    height: 30px;
    padding: 5px 10px;
  }
  .left {
    display: flex;
    flex: 1;
    flex-wrap: wrap;
  }
}
/deep/.el-dialog__footer {
  text-align: center;
  .el-button {
    color: #fff;
    background: #0f47b8;
    height: 30px;
    width: 100px;
    padding: 5px 10px;
  }
}
/deep/.el-dialog__header {
  padding: 0;
}
/deep/.el-dialog__body {
  padding: 20px;
}
.pagination {
  // height: 50px;
  margin: 10px;
  text-align: right;
}
</style>
